<script setup lang="ts">
import { ref } from 'vue';

import axios from 'axios';

import graphJson from '../../assets/data/cytoscape_data.json';
import { SigmaGraph } from './components';

const graphData = ref(graphJson);
// console.log(graphData.value);

const question = ref('');
const answer = ref('');

// 用户提问
const askQuestion = async () => {
  if (!question.value.trim()) return;
  const res = await axios.post(
    'https://你的DifyAPI地址.com/v1/chat-messages',
    {
      inputs: { question: question.value },
      conversation_id: 'graph_recommend',
    },
    {
      headers: { Authorization: 'Bearer 你的API_KEY' },
    },
  );
  answer.value = res.data.answer;
};

// 点击节点可扩展相关操作
const handleNodeClick = (nodeData: any) => {
  question.value = `这个模型（${nodeData.label}）的适用场景和相关模型有哪些？`;
  askQuestion();
};
</script>

<template>
  <div class="space-y-6 p-6">
    <!-- 图谱展示区域 -->
    <div class="h-[600px] rounded-2xl border shadow-md">
      <!-- <CytoscapeGraph
        :elements="graphData"
        @node-click="handleNodeClick"
        v-if="graphData.nodes.length > 0"
      /> -->
      <SigmaGraph
        :elements="graphData"
        @node-click="handleNodeClick"
        v-if="graphData.nodes.length > 0"
      />
    </div>

    <!-- 问答区域 -->
    <div class="space-y-4">
      <h2 class="text-xl font-semibold">智能问答推荐</h2>
      <div class="flex gap-2">
        <input
          v-model="question"
          type="text"
          placeholder="请输入你的问题..."
          class="flex-1 rounded-xl border px-4 py-2 focus:outline-none"
        />
        <button
          @click="askQuestion"
          class="rounded-xl bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
        >
          提问
        </button>
      </div>
      <div
        v-if="answer"
        class="whitespace-pre-line rounded-xl border bg-gray-50 p-4"
      >
        <strong>回答：</strong>
        <p>{{ answer }}</p>
      </div>
    </div>
  </div>
</template>
